<h1>Kreator zasad gry</h1>

<div id="stage_1">
	<div class="steps">
		<div id="step_first"><span id="active_arrow_text">krok 1</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 2</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 3</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 4</span></div>
		<div id="step_last"><span class="inactive_arrow_text">krok 5</span></div>
	</div>
	<div>Wprowadź podstawowe dane.</div>
	<div>
		<form id="form_stage_1">
			<table class="form_table">
			<colgroup style="width:80px" />
			<colgroup style="width:*" />
			<tr style="height:30px">
				<td colspan="2">
					<span id="name_error" style="color:red;display:none;height:60px">Popraw dane</span>
				</td>			
			</tr>
			<tr>
				<td>Nazwa:</td>
				<td><input id="rule_name" type="text" placeholder="Nazwa zasad gry" /></td>
			</tr>
			<tr>
				<td>Gracze:</td>
				<td><input id="rule_label_1" value="A" class="form_input" type="text" placeholder="Gracz A" /><br />
				<input id="rule_label_2" value="B" class="form_input" style="margin-top:3px;" type="text" placeholder="Gracz B" /></td>
			</tr>
			<tr>
			<td>Typ:</td>
				<td><div><input id="mat" name="type" type="radio" value="Macierz" CHECKED />macierz<br />
				<input id="tree" name="type" type="radio" value="Drzewo" />drzewo</div>
				</td>
			</tr>
			</table>
		<input type="submit" value="Dalej >>" style="margin:20px auto 50px auto" />	
		</form>
	</div>
</div>

<div class="mat_stage_2" style="display:none">
	<div class="steps">
		<div id="step_first"><span class="inactive_arrow_text">krok 1</span></div>
		<div class="step_middle"><span id="active_arrow_text">krok 2</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 3</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 4</span></div>
		<div id="step_last"><span class="inactive_arrow_text">krok 5</span></div>
	</div>
	<div>Wprowadź rozmiar macierzy.</div>
	<div>
		<form id="mat_form_stage_2">
			<table class="form_table">
			<colgroup style="width:80px" />
			<colgroup style="width:*" />
			<tr style="height:30px">
				<td colspan="2">
					<span id="name_error2" style="color:red;display:none;height:60px">Popraw dane</span>
				</td>			
			</tr>
			<tr>
				<td>Rozmiar:</td>
				<td><input id="mat_size_1" class="form_input_int" type="text" value="2" size="4" /> x <input id="mat_size_2" class="form_input_int" type="text" value="2" size="4" /></td>
			</tr>
			</table>
		<input type="submit" value="Dalej >>" style="margin:112px auto 50px auto" />
		</form>
	</div>	
</div>

<div class="mat_stage_3" style="display:none">
	<div class="steps">
		<div id="step_first"><span class="inactive_arrow_text">krok 1</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 2</span></div>
		<div class="step_middle"><span id="active_arrow_text">krok 3</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 4</span></div>
		<div id="step_last"><span class="inactive_arrow_text">krok 5</span></div>
	</div>
	<div>Wprowadź wartości do macierzy.</div>

	<form id="mat_form_stage_3" action="<?php echo url_for('@mod_rules_add') ?>">
		<div id="mat_valeuse">
		</div>	
		<input type="submit" value="Dalej >>" style="margin:10px auto 50px auto" />
	</form>
</div>

<div class="stage_4"  style="display:none">
	<div class="steps">
		<div id="step_first"><span class="inactive_arrow_text">krok 1</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 2</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 3</span></div>
		<div class="step_middle"><span id="active_arrow_text">krok 4</span></div>
		<div id="step_last"><span class="inactive_arrow_text">krok 5</span></div>
	</div>
	<div>Wprowadź dane zakończenia gry.</div>
	
	<div>
		<form id="form_stage_4">
			<table class="form_table">
			<colgroup style="width:220px" />
			<colgroup style="width:*" />
			<tr>
				<td>Sposób naliczania punktów:</td>
				<td><select id="win_type">
					<option value="0">mniejsza</option>
					<option value="1" selected="selected">większa</option>
				</select> liczba wygrywa</td>
			</tr>
			<tr>
				<td>Warunek końca meczu:</td>
				<td>do <input id="end_value" type="text" size="3" value="5" /> 
					<select id="end_type">
						<option value="0">gier</option>
						<option value="1">punktów przewagi</option>
						<option value="2">punktów</option>
						<option value="3">zwycięstw</option>
					</select></td>
			</tr>
                        <tr>
				<td>Punkty dla wolnego losu:</td>
				<td><input id="free_pts" type="text" size="3" value="0" /> 
                                </td>
			</tr>
			</table>
			<input type="submit" value="Dalej >>" style="margin:88px auto 50px auto" />
		</form>
	</div>
</div>

<div class="tree_stage_2"  style="display:none">
	<div class="steps">
		<div id="step_first"><span class="inactive_arrow_text">krok 1</span></div>
		<div class="step_middle"><span id="active_arrow_text">krok 2</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 3</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 4</span></div>
		<div id="step_last"><span class="inactive_arrow_text">krok 5</span></div>
	</div>
	<div>Wprowadź wstępną liczbę węzłów.</div>	
	<div>
		<form id="form_stage_2" >
			<table class="form_table">
			<colgroup style="width:120px" />
			<colgroup style="width:*" />
			<tr>
				<td>Liczba węzłów:</td>
				<td><input id="node_init_number" class="form_input_int" type="text" value="8" size="4" /></td>
			</tr>
			</table>
			<input type="submit" value="Dalej >>" style="margin:88px auto 50px auto"/>
		</form>
	</div>
</div>

<div class="tree_stage_3"  style="display:none">
	<div class="steps">
		<div id="step_first"><span class="inactive_arrow_text">krok 1</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 2</span></div>
		<div class="step_middle"><span id="active_arrow_text">krok 3</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 4</span></div>
		<div id="step_last"><span class="inactive_arrow_text">krok 5</span></div>
	</div>
	<div>Wprowadź dane dotyczące drzewa.<br /><span style="font-size: 10px;margin-top:10px;">UWAGA! Pierwszy węzeł na liście jest uznawany za wierzchołek drzewa.</span></div>	
	<div>
		<form id="form_stage_3" action="<?php echo url_for('@mod_rules_add') ?>">
			<div id="gsp_new_node" style="margin-bottom: 10px"><a id="node_add" class="content_option" href="#" title="Dodaj nowy węzeł"><img class="option_img" src="/images/iAdd.png">dodaj</a></div>
                        <input id="validate_tree" type="button" value="Podgląd drzewa" style="margin:0px auto 20px auto" title="Sprawdź poprawność wprowadzonych danych i wygeneruj podgląd drzewa"/><br />
			<div id="tree_preview"></div>
			<input type="submit" value="Dalej >>" style="margin:0px auto 50px auto" />
		</form>
	</div>
</div>

<div class="stage_5"  style="display:none">
	<div class="steps">
		<div id="step_first"><span class="inactive_arrow_text">krok 1</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 2</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 3</span></div>
		<div class="step_middle"><span class="inactive_arrow_text">krok 4</span></div>
    <div id="step_last"><span id="active_arrow_text">krok 5</span></div>
	</div>
	<div style="margin:80px;auto">
	Zasady gry zostały zapisane.
	</div>
</div>